import React, {Component} from 'react';
import {Icon,Divider,Button,Input,message} from "antd";
import './Sku.css';


class Sku extends Component {
    constructor(props) {
        super(props);
        this.state = {
            skuList: [],
            addSkuForm:false,
            specList:[]
        };
    }

    render() {
        const {skuList,addSkuForm,specList} = this.state;
        return (
            <div className={'skuTableContainer'}>
                <div className={'skuList'}>
                    {
                        skuList&&skuList.map((item,index)=>{
                            return(
                                <div className={'skuItem'} key={index}>
                                    <div className={'skuItemTitle'}>
                                        <span>{item.label}</span>
                                        <span>
                                            <Icon
                                                title={'点击删除'}
                                                type="close-circle"
                                                style={{fontSize:'12px',color:'#ababab',marginLeft:'4px'}}
                                                theme={'filled'}
                                                onClick={()=>this.handleDeleteSku(index)}
                                            />
                                        </span>
                                    </div>
                                    <div className={'skuValues'}>
                                        {
                                            item.values&&item.values.map((item,valueIndex)=>{
                                                return(
                                                    <div className={'skuValue'} key={valueIndex}>
                                                        <span>{item.label}</span>
                                                        <span className={'skuValueDelete'}>
                                                            <Icon
                                                                title={'点击删除'}
                                                                type="close-circle"
                                                                style={{fontSize:'12px',color:'#ababab',marginLeft:'4px'}}
                                                                theme={'filled'}
                                                                onClick={()=>this.handleDeleteSkuValue(index,valueIndex)}
                                                            />
                                                        </span>
                                                    </div>
                                                )
                                            })
                                        }
                                        <div className={'skuValue'}>
                                            <Input
                                                value={item.inputValue}
                                                onChange={(e)=>this.handleSkuValueOnChange(index,e)}
                                                addonAfter={<span style={{cursor:'pointer'}} onClick={()=>this.handleAddSkuValue(index)}>添加</span>}
                                            />
                                        </div>
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
                <div className={'addSkuContainer'}>
                    {
                        !addSkuForm?<Button onClick={()=>this.handleShowSkuForm(true)}>添加规格</Button>:''
                    }
                    {
                        addSkuForm?
                            <div className={'skuForm'}>
                            <div className={'skuFormItem'}>
                                <div className={'skuFormItemLabel'}>
                                    <span className={'required'}>*</span>
                                    <span>规格名：</span>
                                </div>
                                <div className={'skuFormItemInput'}>
                                    <Input placeholder={'请输入规格名'} onChange={(e)=>this.handleSkuLabelChange(e)} />
                                </div>
                            </div>
                            <div className={'skuFormItem'}>
                                <div className={'skuFormItemLabel'}>
                                    <span className={'required'}>*</span>
                                    <span>规格值：</span>
                                </div>
                                <div className={'skuFormItemInput'}>
                                    <Input placeholder={'请输入规格值'} onChange={(e)=>this.handleSkuValueLabelChange(e)} />
                                </div>
                            </div>
                            <div className={'skuFormItem'}>
                                <Button type={'primary'} onClick={()=>this.handleAdd()}>添加</Button>
                                <Button onClick={()=>this.handleShowSkuForm(false)}>取消</Button>
                            </div>
                        </div>:''
                    }
                </div>
                {
                    skuList.length > 0 ?
                        <div className={'skuTable'}>
                            <Divider dashed />
                            <div className={'settingContainer'}>
                                <div className={'settingItem'}>
                                    批量设置
                                </div>
                                <div className={'settingItem'}>
                                    <Input onChange={(e)=>this.handleSettingChange(e,'settingNumber')} placeholder={'商家编码'} />
                                </div>
                                <div className={'settingItem'}>
                                    <Input type={'number'} onChange={(e)=>this.handleSettingChange(e,'settingPrice')} placeholder={'销售价'} />
                                </div>
                                <div className={'settingItem'}>
                                    <Input type={'number'} onChange={(e)=>this.handleSettingChange(e,'settingLinePrice')} placeholder={'划线价'} />
                                </div>
                                <div className={'settingItem'}>
                                    <Input type={'number'} onChange={(e)=>this.handleSettingChange(e,'settingStore')} placeholder={'库存数量'} />
                                </div>
                                <div className={'settingItem'}>
                                    <Input type={'number'} onChange={(e)=>this.handleSettingChange(e,'settingWeight')} placeholder={'重量'} />
                                </div>
                                <div className={'settingItem'}>
                                    <Button onClick={()=>this.handleSettingAdd()}>确定</Button>
                                </div>
                            </div>
                            <table>
                                <thead>
                                {
                                    this.handleGetHead(skuList)
                                }
                                </thead>
                                <tbody>
                                {
                                    this.handleGetBody(skuList,specList)
                                }
                                </tbody>
                            </table>
                        </div> : ''
                }
            </div>
        )
    }

    componentDidMount() {
        const {skuList}=this.state;
        this.handleGetSpec(skuList);
    }
    /**
     * 批量设置输入框变化事件
     * @param e
     * @param type
     */
    handleSettingChange(e,type){
        const value=e.target.value;
        switch (type) {
            case 'settingNumber':
                this.setState({settingNumber:value});
                break;
            case 'settingPrice':
                this.setState({settingPrice:value});
                break;
            case 'settingLinePrice':
                this.setState({settingLinePrice:value});
                break;
            case 'settingStore':
                this.setState({settingStore:value});
                break;
            case 'settingWeight':
                this.setState({settingWeight:value});
                break;
        }
    }

    /**
     * 处理批量设置按钮事件
     */
    handleSettingAdd(){
        const {settingNumber,settingPrice,settingLinePrice,settingStore,settingWeight,specList}=this.state;
        for(let i=0;i<specList.length;i++){
            specList[i].form={
                settingNumber:settingNumber?settingNumber:specList[i].form.settingNumber,
                settingPrice:settingPrice?settingPrice:specList[i].form.settingPrice,
                settingLinePrice:settingLinePrice?settingLinePrice:specList[i].form.settingLinePrice,
                settingStore:settingStore?settingStore:specList[i].form.settingStore,
                settingWeight:settingWeight?settingWeight:specList[i].form.settingWeight,
            }
        }
        this.setState({specList});
    }

    /**
     * 处理规格名输入框变化事件
     * @param e
     */
    handleSkuLabelChange(e){
        this.setState({skuLabel:e.target.value});
    }

    /**
     * 处理规格值输入框变化事件
     * @param e
     */
    handleSkuValueLabelChange(e){
        this.setState({skuValueLabel:e.target.value});
    }

    /**
     * 显示隐藏规格添加表单
     * @param visible
     */
    handleShowSkuForm(visible){
        this.setState({addSkuForm:visible});
    }

    /**
     * 处理点击添加按钮事件
     */
    handleAdd(){
        let {skuList,skuLabel,skuValueLabel}=this.state;
        if(!skuLabel){
            message.error('请输入规格名');
            return;
        }
        if(!skuValueLabel){
            message.error('请输入规格值');
            return;
        }
        if(!skuList){
            skuList=[];
        }
        const len=skuList.length+1;
        const item={
            key: 'key-'+len,
            label: skuLabel,
            inputValue:'',
            values: [
                {
                    key: 'key-'+len+'-value-1',
                    label: skuValueLabel
                }
            ]
        };
        skuList.push(item);
        this.handleGetSpec(skuList);
        this.setState({skuList,skuLabel:'',skuValueLabel:'',addSkuForm:false});
    }

    /**
     * 处理删除规格事件
     * @param index
     */
    handleDeleteSku(index){
        const {skuList}=this.state;
        skuList.splice(index,1);
        this.handleGetSpec(skuList);
        this.setState({skuList});
    }

    /**
     * 处理删除规格值事件
     * @param index
     * @param valueIndex
     */
    handleDeleteSkuValue(index,valueIndex){
        const {skuList}=this.state;
        skuList[index].values.splice(valueIndex,1);
        if(skuList[index].values.length<=0){
            skuList.splice(index,1);
        }
        this.handleGetSpec(skuList);
        this.setState({skuList});
    }

    /**
     * 处理添加规格值事件
     * @param index
     * @param e
     */
    handleSkuValueOnChange(index,e){
        const {skuList}=this.state;
        skuList[index].inputValue=e.target.value;
        this.handleGetSpec(skuList);
        this.setState({skuList});
    }

    /**
     * 处理添加规格值事件
     */
    handleAddSkuValue(index){
        const {skuList}=this.state;
        if(!skuList[index].inputValue){
            message.error('请输入规格值');
            return;
        }
        let len=skuList[index].values.length+1;
        let item={
            key: 'key-'+(index+1)+'-value-'+len,
            label: skuList[index].inputValue
        };
        skuList[index].values.push(item);
        skuList[index].inputValue='';
        this.handleGetSpec(skuList);
        this.setState({skuList});
    }

    /**
     * 获取sku列表
     * @param skuList
     * @returns {Array}
     */
    handleGetSpec(skuList) {
        let specList = [];
        skuList.map((item, index) => {
            let temp = [];
            if (index === 0) {
                let values = item.values;
                for (let i = 0; i < values.length; i++) {
                    let label = [values[i].label];
                    let form={
                        settingNumber:'',
                        settingPrice: '',
                        settingLinePrice: '',
                        settingStore:'',
                        settingWeight: ''
                    };
                    let item = {key: values[i].key, form, label};
                    temp.push(item);
                }
            } else {
                let values = item.values;
                for (let k = 0; k < specList.length; k++) {
                    for (let i = 0; i < values.length; i++) {
                        let item = JSON.parse(JSON.stringify(specList[k]));
                        item.key = item.key + '_' + values[i].key;
                        item.label.push(values[i].label);
                        temp.push(item);
                    }
                }
            }
            specList = temp;
        });
        this.setState({specList});
    }


    /**
     * 获取表格头部
     * @param skuList
     * @returns {*}
     */
    handleGetHead(skuList) {
        return (
            <tr>
                {
                    skuList.map((item, index) => {
                        return (
                            <th key={index}>{item.label}</th>
                        )
                    })
                }
                <th>规格图片</th>
                <th>商家编码</th>
                <th>销售价</th>
                <th>划线价</th>
                <th>库存</th>
                <th>重量(kg)</th>
            </tr>
        )
    }

    /**
     * 获取表格内容
     * @param skuList
     */
    handleGetBody(skuList,specList) {
        let allNum = 1;
        let numArr = [];
        for (let i = 0; i < skuList.length; i++) {
            numArr.push(skuList[i].values.length);
            allNum *= skuList[i].values.length;
        }
        const trs = this.handleGetTrs(allNum, numArr, specList);
        return trs;
    }

    /**
     * 获取单元格
     * @param allNum
     * @param numArr
     * @param specList
     * @returns {*}
     */
    handleGetTrs(allNum, numArr, specList) {
        const _this=this;
        return specList.map((item, index) => {
            return (
                <tr key={index}>
                    {
                        this.handleGetTds(index, allNum, numArr, specList)
                    }
                    <td>图片</td>
                    <td style={{maxWidth:'60px'}}>
                        <Input
                            style={{width:'60%'}}
                            value={item.form.settingNumber}
                            onChange={(e)=>_this.handleFormInputChange(e,index,'settingNumber')}
                        />
                    </td>
                    <td style={{maxWidth:'60px'}}>
                        <Input
                            type={'number'}
                            style={{width:'60%'}}
                            value={item.form.settingPrice}
                            onChange={(e)=>_this.handleFormInputChange(e,index,'settingPrice')}
                        />
                    </td>
                    <td style={{maxWidth:'60px'}}>
                        <Input
                            type={'number'}
                            style={{width:'60%'}}
                            value={item.form.settingLinePrice}
                            onChange={(e)=>_this.handleFormInputChange(e,index,'settingLinePrice')}
                        />
                    </td>
                    <td style={{maxWidth:'60px'}}>
                        <Input
                            type={'number'}
                            style={{width:'60%'}}
                            value={item.form.settingStore}
                            onChange={(e)=>_this.handleFormInputChange(e,index,'settingStore')}
                        />
                    </td>
                    <td style={{maxWidth:'60px'}}>
                        <Input
                            type={'number'}
                            style={{width:'60%'}}
                            value={item.form.settingWeight}
                            onChange={(e)=>_this.handleFormInputChange(e,index,'settingWeight')}
                        />
                    </td>
                </tr>
            )
        })
    }

    /**
     * 获取占位单元格
     * @param index
     * @param allNum
     * @param numArr
     * @param specList
     * @returns {Array}
     */
    handleGetTds(index, allNum, numArr, specList) {
        let currentAll = 1;
        let trs = [];
        for (let i = 0; i < numArr.length; i++) {
            currentAll *= numArr[i];
            if (index % (allNum / currentAll) === 0) {
                trs.push(<td key={i} rowSpan={allNum / currentAll}>{specList[index].label[i]}</td>)
            }
        }
        return trs;
    }

    /**
     * 设置对应的规格属性
     * @param e
     * @param index
     * @param type
     */
    handleFormInputChange(e,index,type){
        const {specList}=this.state;
        specList[index].form[type]=e.target.value;
        this.setState({specList});
    }
}

export default Sku;
